<template>
  <div id="app">
    <span v-for="item in list" :key="item.path">
      <router-link :to="item.path" >{{ item.name }}</router-link> | 
    </span>
    <router-view />
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data() {
    return {
      list: [
        {
          name: '插值示例',
          path: 'mustache',
        },
        {
          name: '指令示例',
          path: 'directive',
        },
        {
          name: '组件使用示例',
          path: 'ComponentDemo',
        },
        {
          name: '组件生命周期示例',
          path: 'lifecyle',
        },
        {
          name: '插槽演示',
          path: 'slots',
        },
        {
          name: '响应式演示',
          path: 'reactive',
        },
        {
          name: '计算属性与Watch',
          path: 'computedAndWatch',
        },
      ],
    };
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a {
  font-weight: bold;
  color: #2c3e50;
}

a .router-link-exact-active {
  color: #42b983;
}
</style>
